<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>农田智能分析系统</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://unpkg.com/element-plus"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0"></script>
</head>
<body>
  <div id="app">
    <el-row :gutter="20">
      <!-- 土壤数据图表 -->
      <el-col :span="12">
        <el-card>
          <h3>土壤营养分析 (2025-03-28)</h3>
          <v-chart :option="soilChart" style="height:400px"/>
        </el-card>
      </el-col>

      <!-- 气象数据图表 -->
      <el-col :span="12">
        <el-card>
          <h3>气象变化趋势 (2025-03-28)</h3>
          <v-chart :option="weatherChart" style="height:400px"/>
        </el-card>
      </el-col>

      <!-- 病虫害预警 -->
      <el-col :span="24">
        <el-alert
          title="严重病虫害预警"
          type="error"
          :closable="false"
          description="苹果黑星病（重度感染）影响区域：西区果园A区，最后检测时间：2025-03-26 16:45"/>
      </el-col>

      <!-- 生长预测图表 -->
      <el-col :span="24">
        <el-card>
          <h3>作物生长预测模型</h3>
          <v-chart :option="growthChart" style="height:300px"/>
        </el-card>
      </el-col>
    </el-row>
  </div>

<script>
const { createApp } = Vue;
const app = createApp({
  data() {
    return {
      soilChart: {
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['湿度', 'pH值', '氮含量', '磷含量', '钾含量', '有机质']
        },
        yAxis: { type: 'value' },
        series: [{
          data: [22.8, 6.5, 1.1, 0.7, 1.3, 2.9],
          type: 'bar',
          itemStyle: { color: '#91cc75' }
        }]
      },
      weatherChart: {
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['08:00', '12:00', '16:00']
        },
        yAxis: [
          {
            type: 'value',
            name: '温度/湿度',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#5470c6'
              }
            },
            axisLabel: {
              formatter: '{value} °C / %'
            }
          },
          {
            type: 'value',
            name: '降雨量',
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#91cc75'
              }
            },
            axisLabel: {
              formatter: '{value} mm'
            }
          }
        ],
        legend: { data: ['温度', '湿度', '降雨量'] },
        series: [
          {
            name: '温度',
            data: [18.5, 22.3, 20.7],
            type: 'line',
            smooth: true,
            yAxisIndex: 0
          },
          {
            name: '湿度',
            data: [65, 58, 62],
            type: 'line',
            smooth: true,
            yAxisIndex: 0
          },
          {
            name: '降雨量',
            data: [0, 0, 2.5],
            type: 'bar',
            yAxisIndex: 1
          }
        ]
      },
      growthChart: {
        tooltip: { trigger: 'item' },
        series: [{
          name: '生长预测',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 65, name: '健康生长区' },
            { value: 25, name: '病害影响区' },
            { value: 10, name: '营养缺乏区' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
    }
  }
});

app.use(ElementPlus);
app.component('v-chart', VueECharts);
app.mount('#app');
</script>

<style>
body { padding: 20px; background-color: #f5f7fa; }
.el-col { margin-bottom: 20px; }
h3 { color: #303133; margin-bottom: 15px; }
</style>
</body>
</html>